<template>
    <div>
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                      v-model="raceName"></el-input>
            <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>-->
            <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>-->
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd">创建赛事 <i class="el-icon-circle-plus-outline"></i></el-button>
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定批量删除这些数据吗？"
                    @confirm="delBatch">
                <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
            <el-button
                    type="primary"
                    icon="el-icon-download"
                    @click="downloadTemplate('template.xlsx')">下载导入比赛数据模板
            </el-button>
            <!--<el-upload action="http://localhost:9090/race/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
              <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
            </el-upload>
            <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>-->
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" v-if="false" width="80" sortable></el-table-column>
            <el-table-column prop="raceId" label="赛事id" v-if="false"></el-table-column>
            <el-table-column label="封面" align="center">
                <template slot-scope="scope">
                    <div style="display: inline-block">
                        <el-image style="width: 60px; border-radius: 50%;
                        position: relative;height: 60px" :src="scope.row.raceImg"
                                  :preview-src-list="[scope.row.raceImg]">
                            <div slot="error" class="image-slot">
                                <img style="width: 60px; border-radius: 50%;position: relative;height: 60px"
                                     src="../assets/imgs/中跆协.jpg">
                            </div>
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="raceType" label="类 型" :formatter="raceTypeFormatter" width="80"
                             align="center"></el-table-column>
            <el-table-column prop="raceName" label="名 称" :show-overflow-tooltip="true" align="left"
                             width="280"></el-table-column>
            <el-table-column prop="raceStation" label="分 站" align="center" width="160"></el-table-column>
            <el-table-column prop="raceDate" :formatter="splitStartDate" label="开始日期"
                             align="center"></el-table-column>
            <el-table-column prop="raceDate" :formatter="splitEndDate" label="结束日期"
                             align="center"></el-table-column>
            <el-table-column prop="racePosition" label="地 点" align="center" width="220"></el-table-column>
            <el-table-column prop="raceLevel" label="级 别" align="center"></el-table-column>
            <el-table-column prop="scoreYear" v-if="user.role==='ROLE_CTA_RANK'" label="积分计入年份"
                             align="center"></el-table-column>
            <el-table-column prop="raceStatus" label="状 态" align="center"
                             :formatter="statusFormatter"></el-table-column>

            <el-table-column label="操 作" width="250" align='center'>
                <template slot-scope="scope">
                    <!--仅竞赛可见-->
                    <el-tooltip class="item" effect="dark" content="选派裁判" placement="top-start">
                        <el-button type="text" @click="selectJudge(scope.row)"
                                   v-if="user.role==='ROLE_CTA_COMPETITION'">
                            <i class="el-icon el-icon-user"/>
                        </el-button>
                    </el-tooltip>
                    <!--仅竞赛可见-->
                    <el-tooltip class="item" effect="dark" content="生成裁判报名链接" placement="top-start">
                        <el-button type="text" @click="selectDeadDate(scope.row)"
                                   v-if="user.role==='ROLE_CTA_COMPETITION'">
                            <i class="el-icon el-icon-link"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="导入比赛结果" placement="top-start">
                        <el-button type="text" @click="onChange(scope.row)"><i class="el-icon el-icon-upload"></i>
                        </el-button>
                    </el-tooltip>
                    <el-upload ref="upload" action="" :show-file-list="false" accept="xlsx" :auto-upload="false"
                               :on-change="importResult"
                               :on-success="handleExcelImportSuccess" style="display: inline-block">
                        <el-button style="display: none"></el-button>
                    </el-upload>
                    <!--仅竞赛可见-->
                    <el-tooltip class="item" effect="dark" content="生成技术官员名单" placement="top-start">
                        <el-button v-if="user.role==='ROLE_CTA_COMPETITION'" type="text"
                                   @click="generatePdf(scope.row)">
                            <i class="el-icon el-icon-document"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑信息" placement="top-start">
                        <el-button type="text" @click="handleEdit(scope.row)"><i class="el-icon el-icon-edit"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-popconfirm
                                class="ml-5"
                                confirm-button-text='确定'
                                cancel-button-text='我再想想'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定删除吗？"
                                @confirm="del(scope.row.id)"
                        >
                            <el-button type="text" slot="reference"><i class="el-icon el-icon-delete"></i></el-button>
                        </el-popconfirm>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 30, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="创建赛事" :visible.sync="dialogFormVisible" ref="createRace" width="40%"
                   :close-on-click-modal="false">
            <el-form label-width="120px" size="small" style="width: 80%; margin: 0 auto">
                <el-form-item prop="raceId" label="赛事id" hidden>
                    <el-input v-model="form.raceId" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item prop="raceImg" label="赛事封面:">
                    <template>
                        <div style="display: inline-block">
                            <imgUpload :transfer="getmsg" :imgUrl="imgUrl"></imgUpload>
                            <p style="font-size: 10px;color: red">(不上传视为使用默认图片)</p>
                        </div>
                    </template>

                </el-form-item>
                <el-form-item prop="raceType" label="赛事类型:">
                    <el-select v-model="form.raceType" placeholder="请选择" @change="selectType(form.raceType)">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="raceLevel" label="赛事级别:">
                    <el-select v-model="form.raceLevel" placeholder="请选择">
                        <el-option
                                v-for="item in levels"
                                :key="item.type"
                                :label="item.level"
                                :value="item.level">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="raceName" label="赛事名称:">
                    <el-input v-model="form.raceName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="raceStation" label="分站:">
                    <el-input v-model="form.raceStation" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="raceDate" label="赛事日期:">
                    <el-date-picker v-model="form.raceDate" type="daterange" value-format="yyyy/MM/dd"
                                    range-separator="-"
                                    start-placeholder="开始日期:"
                                    end-placeholder="结束日期:"
                                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="raceName" label="赛事地点:">
                    <el-input v-model="form.racePosition" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="scoreYear" label="积分计入年份:" v-if="user.role==='ROLE_CTA_RANK'">
                    <el-date-picker v-model="form.scoreYear" value-format="yyyy" type="year">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <!--选派裁判-->
        <el-dialog :close-on-click-modal="false"
                   title="选派裁判员"
                   :visible.sync="dialogJudgeVisible"
                   ref="JudgeDialog"
                   top="30px"
                   center="true"
                   width="90%">
            <!-- <iframe style="width: 100%;height: 700px;margin-top: 10px;margin-top: -10px;" :src="url"></iframe> -->
            <SelectJudge :raceId="raceId" :activeName="activeName" ref="SelectJudge"></SelectJudge>
        </el-dialog>
        <!--选择报名截止日期-->
        <el-dialog :visible.sync="dialogDeadDate" width="40%" :close-on-click-modal="false">
            <el-form label-width="120px" size="small" style="width: 80%; margin: 0 auto">
                <el-form-item prop="rankYear" label="报名截止日期">
                    <el-date-picker type="date" v-model="value1" value-format="yyyy-MM-dd" placeholder="请选择截止日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogDeadDate = false">取 消</el-button>
                <el-button type="primary" @click="generateLink()">确 定</el-button>
            </div>
        </el-dialog>
        <!--生成链接-->
        <el-dialog title="生成结果" :visible.sync="dialogLink" width="40%" ref="dialogLink" :close-on-click-modal="false">
            <span>报名链接：</span>
            <span id="link"></span>
            <Qrcode :url="linkUrl" ref="Qrcode"></Qrcode>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLink = false">取 消</el-button>
                <el-button type="primary" @click="copy()">复制链接</el-button>
            </div>
        </el-dialog>
        <!--导入结果-->
        <el-dialog title="导入结果" :visible.sync="importResultVisible">
            <el-table :data="resultData">
                <!--                <el-table-column property="raceName" label=比赛名称></el-table-column>-->
                <!--                <el-table-column property="raceDate" label="比赛日期"></el-table-column>-->
                <!--                <el-table-column property="raceStation" label="分站"></el-table-column>-->
                <el-table-column property="peoName" label="姓名"></el-table-column>
                <el-table-column property="peoSex" width="80" label="性别"></el-table-column>
                <el-table-column property="peoIdcard" width="200" label="身份证号"></el-table-column>
                <el-table-column property="peoUnit" label="所属单位"></el-table-column>
                <el-table-column property="scoreLevel" label="参赛级别"></el-table-column>
                <el-table-column property="peoRank" label="排名"></el-table-column>
                <el-table-column property="domesticScore" label="国内分数"></el-table-column>
                <el-table-column property="foreignScore" label="国际分数"></el-table-column>
            </el-table>
            <div style="padding: 10px 0">
                <el-pagination
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :current-page="pageNum2"
                        :page-sizes="[10, 30, 50, 100]"
                        :page-size="pageSize2"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total2">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as XLSX from "xlsx"
    import SelectJudge from './SelectJudge.vue'
    import Qrcode from "../components/Qrcode";
    import imgUpload from "../components/imgUpload";

    export default {
        name: "Race",
        data() {
            return {
                tableData: [],
                resultData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                total2: 0,
                pageNum2: 1,
                pageSize2: 10,
                raceName: "",
                form: {},
                dialogFormVisible: false,
                dialogJudgeVisible: false,
                dialogDeadDate: false,
                dialogLink: false,
                importResultVisible: false,
                dialogLogVisible: false,
                multipleSelection: [],
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                options: [
                    {value: '0', label: '国内'},
                    {value: '1', label: '国际'}
                ],
                levels: [],
                url: '',
                linkUrl: '',
                raceData: {},
                value1: '',
                currentData: {},
                raceId: '',
                activeName: 'first',
                imgUrl: '',
                pickerOptions: {
                    disabledDate: (time) => {
                        // 禁用今天之前的日期选择
                        return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
                    }
                },
            }
        },
        components: {Qrcode, SelectJudge, imgUpload},
        created() {
            this.load()
        },
        mounted() {
            this.dialogLink = true
            this.$refs.dialogLink.rendered = true //updateInsertDialog是dialog的ref;
            this.dialogLink = false
            this.dialogFormVisible = true
            this.$refs.createRace.rendered = true
            this.dialogFormVisible = false
        },
        methods: {
            load() {
                const data = {
                    "page": this.pageNum,
                    "pageSize": this.pageSize,
                    "raceName": this.raceName
                }
                this.request.post("/race/page", data).then(res => {
                    //this.tableData = res.data.records
                    this.tableData = res.data.data
                    this.total = res.data.total
                })
            },
            splitStartDate(row) {
                return row.raceDate.split("-")[0]
            },
            splitEndDate(row) {
                return row.raceDate.split("-")[1]
            },
            raceTypeFormatter(row) {
                if (row.raceType === "0") {
                    return "全国"
                } else {
                    return "全运"
                }

            },
            statusFormatter(row) {
                switch (row.raceStatus) {
                    case "0":
                        return "计划中"
                        break;
                    case "1":
                        return "报名中";
                        break;
                    case "2":
                        return "已结束";
                        break;
                }
            },

            selectDeadDate(row) {
                this.dialogDeadDate = true
                this.currentData = row
            },
            getmsg(img) {
                this.imgUrl = ''
                this.imgData = img

            },
            selectType(type) {
                const data = {
                    "type": type
                }
                this.request.post("/race/queryRaceLevels", data).then(res => {
                    if (res.code === 200) {
                        this.levels = res.data
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            /**
             * 选派裁判
             */
            selectJudge(row) {
                this.$nextTick(() => {
                    this.raceId = row.raceId
                    this.dialogJudgeVisible = true
                    const data = {
                        "page": this.$refs.SelectJudge.pageNum,
                        "pageSize": this.$refs.SelectJudge.pageSize,
                        "name": this.$refs.SelectJudge.name,
                        "raceId": this.raceId
                    }
                    this.request.post("/judge/page", data).then(res => {
                        this.$refs.SelectJudge.tableData = res.data.data
                        this.$refs.SelectJudge.total = res.data.total
                    })
                })
            },
            /**
             * 生成裁判报名链接
             */
            generateLink() {
                this.dialogDeadDate = false
                let linkId = this.md5.md5(this.currentData.raceId).substring(8, 24)
                const data = {
                    "linkId": linkId,
                    "raceId": this.currentData.raceId,
                    "raceName": this.currentData.raceName,
                    "deadDate": this.value1
                }
                this.request.post("/link/save", data).then(res => {
                    if (res.code === 200) {
                        let str = this.GLOBAL.frontURL + '#/judgeLink?linkId=' + linkId
                        document.getElementById("link").innerText = str
                        this.linkUrl = str
                        this.dialogLink = true
                        this.$nextTick(() => {
                            this.$refs.Qrcode.linkUrl = str
                            this.$refs.Qrcode.creatQrCode()
                        })
                    } else {
                        this.$message.error("生成失败")
                    }
                })


            },
            copy() {
                let oInput = document.createElement('input')
                oInput.value = this.linkUrl
                document.body.appendChild(oInput)
                oInput.select() // 选择对象
                document.execCommand("Copy") // 执行浏览器复制命令
                oInput.remove()
                this.$message({
                    message: '复制成功',
                    type: 'success'
                })
            },
            onChange(row) {
                this.raceData = row
                if (row.scoreYear === null || row.scoreYear === undefined || row.scoreYear === "") {
                    this.$message.error("请填写积分计入年份！")
                    return false
                } else {
                    this.$confirm('此操作将永久删除该比赛之前的数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$refs["upload"].$refs["upload-inner"].handleClick();
                    });
                }
            },
            /**
             * 导入比赛结果
             */
            importResult(file) {
                //国际级别
                const foreignLevels = ['49', '57', '67', '670', '58', '68', '80', '800']
                //国内级别
                const domesticLevels = ['46', '49', '53', '57', '62', '67', '73', '730', '54', '58', '63', '68', '74', '80', '87', '870']
                if (!file) {
                    //如果没有文件
                    return false;
                } else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
                    this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
                    return false;
                }
                const fileReader = new FileReader();
                fileReader.onload = (ev) => {
                    try {
                        const data = ev.target.result;
                        const workbook = XLSX.read(data, {
                            type: "binary",
                        });
                        const wsname = workbook.SheetNames[0]; //导入excel的第一张表
                        // 导入的信息
                        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], {range: 1}); //生成json表格内容
                        let params = [];
                        //如果一行表头，则i从0开始，如果是两行则从1开始以此类推
                        for (let i = 0; i < ws.length; i++) {
                            let sheetData = {
                                // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                                peoName: ws[i]["姓名"],
                                peoSex: ws[i]["性别"],
                                peoIdcard: ws[i]["证件号"],
                                peoUnit: ws[i]["所属单位"],
                                raceLevel: ws[i]["参赛级别"],
                                // foreignLevel: ws[i]["国际级别"],
                                peoRank: ws[i]["名次"]
                            };
                            //根据赛事类型判断是否存在不合理的级别

                            //参赛级别
                            let raceLevel = sheetData.raceLevel

                            // let domesticLevel = sheetData.domesticLevel
                            // let foreignLevel = sheetData.foreignLevel
                            if (this.raceData.raceType === '0') {
                                if (raceLevel.indexOf("+80kg") > 0 || raceLevel.indexOf("+87kg") > 0) {
                                    raceLevel = "870"
                                } else if (raceLevel.indexOf("+67kg") > 0 || raceLevel.indexOf("+73kg") > 0) {
                                    raceLevel = "730"
                                } else {
                                    //匹配编码
                                    raceLevel = parseInt(raceLevel.substring(3, 5)).toString()
                                }
                            } else {
                                if (raceLevel.indexOf("80kg以上") > 0) {
                                    raceLevel = "800"
                                } else if (raceLevel.indexOf("67kg以上") > 0) {
                                    raceLevel = "670"
                                } else {
                                    //匹配编码
                                    raceLevel = parseInt(raceLevel).toString()
                                }
                            }

                            // if (foreignLevel.indexOf("以上") > 0 || foreignLevel.indexOf("+") > 0) {
                            //     //匹配编码
                            //     foreignLevel = parseInt(foreignLevel) + "0"
                            // } else {
                            //     foreignLevel = parseInt(foreignLevel).toString()
                            // }
                            //判断是否不存在于数组中
                            if (domesticLevels.indexOf(raceLevel) === -1) {
                                return this.$message.error("存在不符合要求的级别，无法导入")
                            }
                            // if (foreignLevels.indexOf(foreignLevel) === -1) {
                            //     return this.$message.error("存在不符合要求的级别，无法导入")
                            // }
                            sheetData.raceLevel = raceLevel
                            // sheetData.domesticLevel = domesticLevel
                            // sheetData.foreignLevel = foreignLevel
                            params.push(sheetData)
                        }
                        const data2 = {
                            "raceBean": params,
                            "raceType": this.raceData.raceType,
                            "raceName": this.raceData.raceName,
                            "raceStation": this.raceData.raceStation,
                            "raceDate": this.raceData.raceDate,
                            "raceAddress": this.raceData.racePosition,
                            "raceId": this.raceData.raceId,
                            "raceLevel": this.raceData.raceLevel
                        }
                        this.request.post("/race/import", data2).then(res => {
                            if (res.code === 200) {
                                this.$message.success(res.message)
                                this.importResultVisible = true
                                const race = {
                                    "page": this.pageNum2,
                                    "pageSize": this.pageSize2,
                                    "raceId": this.raceData.raceId
                                }
                                this.queryResult(race);
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } catch (e) {
                        this.$message.error("导入失败：" + e)
                        return false;
                    }
                };
                // 如果为原生 input 则应是 files[0]
                fileReader.readAsBinaryString(file.raw);
            },
            queryResult(race) {
                race = {
                    "page": this.pageNum2,
                    "pageSize": this.pageSize2,
                    "raceId": this.raceData.raceId
                }
                this.request.post("/raceDataAll/queryResult", race).then(res => {
                    this.resultData = res.data.data
                    this.total2 = res.data.total
                })
            },
            generatePdf(row) {
                const data = {
                    "raceId": row.raceId,
                    "raceName": row.raceName,
                    "raceStation": row.raceStation
                }
                this.request.post("/race/generatePdf", JSON.stringify(data)).then(res => {
                    if (res.code === 200) {
                        this.$message.success(res.message)
                        let url = res.data.docUrl;
                        window.open(this.GLOBAL.baseURL + url);
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            downloadTemplate(fileName) {
                window.open(this.GLOBAL.baseURL + "/rank/templates/" + fileName)
            },
            save() {
                let that = this
                const level = this.form.raceLevel;
                let raceDate = '';
                raceDate = this.form.raceDate[0] + "-" + this.form.raceDate[1]
                this.form.raceDate = raceDate
                //默认未生成链接状态
                this.form.raceStatus = "0"
                if (this.form.raceType === "0" && level.includes("G")) {
                    return this.$message.error("国内赛事不能选择国际赛事级别！")
                } else if (this.form.raceType === "1" && level.includes("C")) {
                    return this.$message.error("国际赛事不能选择国内赛事级别！")
                }
                let formData = new FormData();
                // if (this.imgData == null && this.imgUrl == '') {
                // }
                let fileName = this.md5.md5(this.form.raceName)
                if (this.imgData && this.imgUrl == '') {
                    formData.append('file', this.imgData, fileName + '.png');
                    that.request.post("/file/upload", formData).then(async res => {
                        if (res.code == 200) {
                            this.form.raceImg = res.data.imgUrl
                            await that.request.post("/race/save", JSON.stringify(this.form)).then(res => {
                                if (res.code === 200) {
                                    this.$message.success(res.message)
                                    this.dialogFormVisible = false
                                    location.reload()
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                        } else {
                            that.$message.error("头像更新失败")
                        }
                    })
                } else {
                    //未上传封面
                    that.request.post("/race/save", JSON.stringify(this.form)).then(res => {
                        if (res.code === 200) {
                            this.$message.success(res.message)
                            this.dialogFormVisible = false
                            location.reload()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
                this.imgUrl = ''
                this.imgData = null
            },
            handleEdit(row) {
                this.selectType(row.raceType)
                this.form = JSON.parse(JSON.stringify(row))
                this.form.raceDate = row.raceDate.split("-")
                this.imgUrl = row.raceImg
                this.dialogFormVisible = true
            },
            del(id) {
                this.request.delete("/race/" + id).then(res => {
                    if (res.code === 200) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            delBatch() {
                if (!this.multipleSelection.length) {
                    this.$message.error("请选择需要删除的数据")
                    return
                }
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                this.request.post("/race/del/batch", ids).then(res => {
                    if (res.code === 200) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            reset() {
                this.raceName = ""
                this.load()
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum
                this.load()
            },
            handleSizeChange2(pageSize) {
                this.pageSize2 = pageSize
                this.queryResult()
            },
            handleCurrentChange2(pageNum) {
                this.pageNum2 = pageNum
                this.queryResult()
            },
            handleFileUploadSuccess(res) {
                this.form.file = res
            },
            handleImgUploadSuccess(res) {
                this.form.img = res
            },
            download(url) {
                window.open(url)
            },
            exp() {
                window.open(this.GLOBAL.baseURL + "/race/export")
            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            }
        }
    }
</script>


<style>
    .headerBg {
        background: #eee !important;
    }

    .el-button {
        margin: 0px 6px 12px;
    }

    .el-icon {
        font-size: 16px;
    }

</style>
